<!-- eslint-disable vue/multi-word-component-names -->
<!-- @Author ： NWJ
        Version ： 1.0 -->

<script lang="js" name="Index">
import AutoTextEffect from '@/components/AutoTextEffect'
import IndexSwiper2 from '@/components/IndexSwiper2'
import TopNav from '@/components/TopNav'

export default {
  components: {
    AutoTextEffect,
    IndexSwiper2,
    TopNav
  },

  data()
  {
    return {
      myQQEmail: 'https://wx.mail.qq.com/home/index?t=readmail_businesscard_midpage&nocheck=true&name=%E2%A0%80&icon=http%3A%2F%2Fthirdqq.qlogo.cn%2Fek_qqapp' +
                  '%2FAQSspIgPjx2RG1KqHvuDXjV1dfFnZic5H4VQ8riakEdNM4UYm6p61Bm7jYcLJlm8iby2QEWlXciblCr3JQzm4CgaDib42aNrLBoxBWXX1adfic5kG2ZXCMOGE%2F0&mail=27273' +
                  '55098%40qq.com&code=03CXykkemas8BSh16R6avjDbdxcjDsiQkDbju4xqfjvbA78U9zdGzT_ATqBvJpSnpVKYDoB-BD6PFxpcd9KO4w',
      imgArr: [
        'https://cn.bing.com/th?id=OHR.CoastalWales_ZH-CN9113929287_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp)',
        'https://cn.bing.com/th?id=OHR.MeknesMorocco_ZH-CN7953910585_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp)',
        'https://cn.bing.com/th?id=OHR.GreatWallStairs_ZH-CN4045949792_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp)',
        'https://cn.bing.com/th?id=OHR.BubbleLake_ZH-CN7146244555_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp)'
      ]
    }
  }

}
</script>


<template>
  <TopNav></TopNav>
  <!-- 轮播图区域 -->
  <div class="swiper">
    <el-carousel height="100vh" motion-blur>
      <el-carousel-item v-for="(imgUrl, index) in imgArr" :key="index">
        <img :src="imgUrl" alt="carousel-image" class="swiper-image" />
      </el-carousel-item>
    </el-carousel>
    <span class="poem"><AutoTextEffect :speed-value=1 /></span>
    <br>
    <span class="poem poem-auth">——聂文杰</span>

    <svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
      <symbol id="blog-double-down" viewBox="0 0 24 24">
        <!-- 移除 fill="currentColor" -->
        <path
          d="M8.2927 7.7071a1 1 0 0 0-1.4142 1.4142l4 4a1 1 0 0 0 1.4142 0l4-4a1 1 0 0 0-1.4142-1.4142L12 10.5858l-3.7071-3.7071z"
          stroke="#ffffff7f" fill="#00000000">
        </path>
        <path
          d="M8.2927 15.7071a1 1 0 0 0-1.4142 1.4142l4 4a1 1 0 0 0 1.4142 0l4-4a1 1 0 0 0-1.4142-1.4142L12 18.5858l-3.7071-3.7071z"
          stroke="#ffffff7f" fill="#00000000">
        </path>
      </symbol>
    </svg>
    <!-- 使用 SVG 图标，包裹在 <a> 标签中 -->
    <a href="#footer" class="icon-container">
      <svg>
        <use href="#blog-double-down"></use>
      </svg>
    </a>
  </div>
  <!--首页主体部分 -->
  <div class="main">
    <IndexSwiper2></IndexSwiper2>
  </div>
  <!-- 页脚 -->
  <footer id="footer" class="footer">
    <div class="footer-content">
      <footer class="footer-main">
        <div class="footer-column">
          <h3>关于我们</h3>
          <ul>
            <li><router-link to="/about">公司简介</router-link></li>
            <li><a href="#">企业文化</a></li>
            <li><a href="#">加入我们</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>产品与服务</h3>
          <ul>
            <li><a href="https://gitee.com/fengyunion/zhi-gui" target="_blank">智柜前端</a></li>
            <li><a href="https://gitee.com/fengyunion/zhigui-end" target="_blank">智柜后端</a></li>
            <li><a href="https://gitee.com/fengyunion" target="_blank">解决方案</a></li>
            <li><a href="https://gitee.com/fengyunion" target="_blank">客户支持</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>资源中心</h3>
          <ul>
            <li><a href="https://gitee.com/fengyunion" target="_blank">帮助文档</a></li>
            <li><a href="https://gitee.com/fengyunion" target="_blank">常见问题</a></li>
            <li><a href="https://gitee.com/fengyunion" target="_blank">社区论坛</a></li>
            <li><a href="https://gitee.com/fengyunion" target="_blank">API文档</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>法律信息</h3>
          <ul>
            <li><a href="https://gitee.com/fengyunion" target="_blank">隐私政策</a></li>
            <li><a href="https://gitee.com/fengyunion" target="_blank">使用条款</a></li>
            <li><a href="https://gitee.com/fengyunion" target="_blank">版权声明</a></li>
          </ul>
        </div>
      </footer>
      <div class="animates" style="height: 146px; -webkit-user-drag: none;">
        <img src="@/assets/dongwu.avif" style="width: 100%; position: relative; z-index: 1;">
        <img src="@/assets/wall.avif" style="width: 100%; position: relative; bottom: 58px; z-index: 0;">
      </div>
      <p>© 2025 智柜. 版权所有.联系我们: <a class="a" :href=myQQEmail target="_blank">fengyunion@qq.com</a></p>
    </div>
  </footer>
</template>


<style scoped>
body {
  overflow-x: hidden; /* 隐藏横向滚动条 */
}

.main {
  background-color: #ffffff7f;
  background-size: cover; /* 图片按比例缩放，覆盖整个容器 */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat; /* 图片不重复 */
  min-height: 100%; /* 确保容器高度占满视口 */
  display: flex;
  justify-content: end;
}

.swiper {
  user-select: none;
  height: 100vh;
  background-color: #425aef;
}
.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片按比例缩放并填充容器，可能会裁剪 */
  border-radius: 0 0 10px 10px;
  -webkit-user-drag: none;
}

.poem {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px #000;
  z-index: 10;
}

.poem-auth {
  top: 60%;
  left: 60%;
  font-size: 1rem;
}

.footer {
  user-select: none;
  background-color: #425aef;
  color: #FFF;
  padding: 20px 0;
  text-align: center;
  position: relative;
  bottom: 0;
  width: 100%;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer p {
  margin: 5px 0;
}

.a {
  -webkit-user-drag: none;
  color: #FFF;
  text-decoration: none;
}

.footer-main {
  color: white;
  padding: 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.footer-column {
  width: 200px;
  margin-bottom: 20px;
}
.footer-column h3 {
  margin-bottom: 15px;
  font-size: 1.2em;
}
.footer-column ul {
  list-style-type: none;
  padding: 0;
}
.footer-column ul li {
  margin-bottom: 8px;
}
.footer-column a {
  color: white;
  text-decoration: none;
}
.footer-column a:hover {
  text-decoration: underline;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .main {
    height: 1120px;
  }
  .article {
    display: flex;

  }
  .instructions{
    margin-top: 300px;
    width: 80vw;
    height: 800px;
  }
  .instructions-title { font-size: 20px;}
  .instructions-content { font-size: 12px;}
  .announcement-page {
   position: absolute;
   z-index: 999;
   right: calc(50vw - 150px);
  }
}
/* svg */
.icon-container {
          position: absolute;
          top: 86vh;
          left: 47vw;
          z-index: 20;
          display: inline-block;
          background: transparent;
          border: none;
          padding: 0;
          margin: 0;
          cursor: pointer;
        }
    
        .icon-container svg {
          width: 96px;
          height: 96px;
          fill: rgba(255, 255, 255, 0.739);
          /* 白色半透明 */
          transition: transform 0.3s ease;
        }
    
        @keyframes bounce {
    
          0%,
          100% {
            transform: translateY(0);
          }
    
          50% {
            transform: translateY(-10px);
          }
        }
    
        .icon-container svg {
          animation: bounce 1.5s infinite ease-in-out;
        }
</style>
